<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-for in/of</title>
    <script src="../vue.js"></script>
  </head>
  <body>
    <div id="box">
      <ul>
        <!-- v-for of / v-for in 实现效果完全一致 ,只不过是关键字不一样,一个是in,一个是of,使用哪种风格都可以 -->
        <li v-for="(item,index)  of list">{{item}}{{index}}</li>
      </ul>

      <ul>
        <!-- 注意: vue中第二个参数是key,第一个是value 第三个是下标 -->
        <li v-for="(value,key,index) of listObj">
          {{key}} {{value}} {{index}}
        </li>
      </ul>

      <ul>
        <!-- 当item是一个对象是,可以使用解构语法 -->
        <li v-for="{name,age} in userObj">
            <!-- 注意: 如解构之后就不能使用item.name了,直接使用name -->
            {{name}} {{age}}
        </li>
      </ul>

      <ul>
        <!-- 当v-for的遍历对象是一个数字是,遍历是从1开始,而不是0-->
        <li v-for="item in 10">
            {{item}}
        </li>
      </ul>

      <!--  -->
    </div>
    <script>
      let obj = {
        //注意,  接受该对象的变量名可以随意 但是该对象中的变量名是固定的
        data() {
          //data中放的是一些实例
          return {
            list: ["aaa", "bbb", "ccc"],
            listObj: {
              a: 1,
              b: 2,
              c: 3,
            },
            userObj:[
                {name: 'John',age:18},
                {name: '张三',age:40},
                {name: '阿话',age:26},
                {name: '小美',age:17},
            ]
          };
        },
      };
      Vue.createApp(obj).mount("#box");
    </script>
  </body>
</html>
